<template>
  <div class='home'>
    <div class="home-header">
      <Film-title title="电影"
                  class="home-title"
                  v-if="this.$route.meta.isHead" />
      <Come-back-home :isLine="isLine"
                      class="home-come"
                      v-if="this.$route.meta.isHead" />

      <van-row v-if="this.$route.meta.isHead">
        <van-col span="4"
                 @click="slectAddress"
                 class="slectAddress">{{this.$store.state.homeStore.NowCity}}<i class="iconfont icon-icon_sanjiaoxing"></i></van-col>
        <van-col span="16">
          <van-tabs v-model="active"
                    line-width="20px"
                    @click="handleTabs(active)"
                    ref="tabs"
                    route>
            <van-tab title="热映">热映</van-tab>
            <van-tab title="影院">影院</van-tab>
            <van-tab title="待映">待映</van-tab>
            <van-tab title="经典电影"
                     title-class="tab">经典电影</van-tab>
          </van-tabs>
        </van-col>
        <van-col span="4">搜索</van-col>
      </van-row>
    </div>
    <keep-alive>
      <router-view class="tab-show"></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data: () => ({
    isLine: true,
    active: JSON.parse(sessionStorage.erindex),
    tabShowContent: ''
  }),
  watch: {
    $route (newVal) {
      sessionStorage.erindex = newVal.meta.erindex
      this.title = newVal.meta.title
    }

  },
  methods: {
    slectAddress () {
      this.$router.push({
        path: '/select'
      })
    },
    handleTabs (active) {
      this.tabShowContent = this.$refs.tabs.$children[active + 1].title
      this.$router.push({ name: this.tabShowContent })
    }

  }

}
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .home-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 3;
    .van-row {
      position: relative;
      .slectAddress {
        color: #666;
        font-size: 15px;
      }
      .van-col {
        height: 46px;
        background-color: #fff;
        border-top: 1px solid rgb(221, 219, 219);
        border-bottom: 1px solid rgb(221, 219, 219);
        .van-tabs {
          position: static;
          /deep/ .van-tabs__wrap {
            .van-tabs__nav {
              .van-tab {
                width: 40px !important;
                margin-left: 5px;
                flex: 1;
                color: #666;
                font-size: 15px;
                font-weight: bold;
              }
              .tab {
                flex: 2;
              }
              .van-tab--active {
                font-weight: bold;
                color: #333;
                font-size: 17px;
              }
            }
          }
          /deep/ .van-tabs__content {
            display: none;
          }
        }
      }
      .van-col--4 {
        text-align: center;
        line-height: 44px;
        widows: 62px !important;
        box-sizing: border-box;
        padding: 0 8.5px;
      }
    }
  }
  .tab-show {
    width: 100%;
    height: 100%;
    margin-top: 150px;
    margin-bottom: 50px;
    overflow: auto;
  }
}
</style>
